﻿<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
    <title>慕课网首页Demo</title>
    <link rel="stylesheet" href="css/mocco.css">
    <link rel="stylesheet" href="css/mF_fancy.css">
    <script src="js/myfocus-2.0.1.min.js"></script>
    <script src="js/setHomeSetFav.js"></script>
    <script src="js/mF_fancy.js"></script>
    <script>
        myFocus.set({
            id:'picBox',
            pattern:'mF_fancy',
            time:3,//切换时间间隔(秒)
            trigger:'click',//触发切换模式:'click'(点击)/'mouseover'(悬停)
            width:1000,//设置图片区域宽度(像素)
            height:310,//设置图片区域高度(像素)
            txtHeight:'default'//文字层高度设置(像素),'default'为默认高度，0为隐藏
        });
    </script>
</head>
    <body>

        <header class="header">
            <ul>
                <li><i></i>加入收藏</li>
                <li><i></i>联系我们</li>
                <li><i></i>设为首页</li>
            </ul>
        </header>
        <main>
            <div class="title">
                <div class="title_top">
                    <div class="logo"><img src="images/logo%20(1).png" alt=""></div>
                    <div class="phone">
                        <img src="images/7.png" alt="">
                        <p>24小时服务热线：<span>123-456-7890</span></p>
                    </div>
                </div>
                <div class="title_bottom">
                    <div class="nav">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li><a href="#">关于慕课</a></li>
                            <li><a href="#">新闻动态</a></li>
                            <li><a href="#">课程中心</a></li>
                            <li><a href="#">在线课程</a></li>
                            <li><a href="#">人才招聘</a></li>
                        </ul>
                    </div>
                    <div class="search">
                        <form action="search.php" method="post">
                            <input type="text" class="text">
                        </form>
                    </div>
                </div>
            </div>
            <div class="slide" id="picBox">
                    <div class="pic">
                        <ul>
                            <li><img src="images/ad2.jpg" /></li>
                            <li><img src="images/ad3.jpg" /></li>
                            <li><img src="images/ad4.jpg" /></li>
                            <!--<li><img src="images/ad.jpg" alt="图4"/></li>-->
                        </ul>
                    </div>
            </div>
            <div class="content">
                <div class="news content_b">
                    <div class="title_nav">
                        <div class="title_t">新闻中心</div>
                        <div class="more">More&gt;&gt;</div>
                    </div>
                    <div class="title_c">
                        <img src="images/news.jpg" alt="">
                        <h2><a href="">5.20 穆女神来喊你表白！</a></h2>
                        <p>活动时间：5月20日-5月25日<br>获奖公布时间：5月26日
                            <br><span>Learn More&gt;&gt;</span>
                        </p>
                        <ul>
                            <li><a href="#">【慕课访谈 用户篇】 “有为屌丝”在路上</a><span>2014-06-01</span></li>
                            <li><a href="#">【有奖活动】给父亲的三行书信</a><span>2014-06-01</span></li>
                            <li><a href="#">《程序猿，请晒出你的童年》活动获奖公告</a><span>2014-05-30</span></li>
                            <li><a href="#">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a><span>2014-05-28</span></li>
                        </ul>
                    </div>
                </div>
                <div class="study content_b">
                    <div class="title_nav">
                        <div class="title_t">课程中心</div>
                        <div class="more">More&gt;&gt;</div>
                    </div>
                    <div class="title_c">
                        <img src="images/css.jpg" alt="">
                        <h2><a href="">CSS圆角进化论</a></h2>
                        <p>CSS圆角的实现，经历了三大发展阶段：背景图片方式、CSS2.0+HTML标签模拟、CSS3.0圆角属性）。</p>
                        <div class="study_nav">
                            <ul>
                                <li>PHP开发</li>
                                <li>前端开发</li>
                                <li>JAVA开发</li>
                                <li>Android开发</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="focus content_b">
                    <div class="title_nav">
                        <div class="title_t">媒体聚焦</div>
                        <div class="more">More&gt;&gt;</div>
                    </div>
                    <div class="title_c">
                        <div class="audio">
                            <embed src="http://player.youku.com/player.php/sid/XNjkzMDE5MTUy/v.swf" allowFullScreen="true" quality="high" width="220" height="140" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
                        </div>
                        <div class="audio_ad">
                            <img src="images/app.jpg" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer>
            <div class="footer">
                <ul>
                    <li>
                        <ul>
                            <li>关于</li>
                            <li>品牌故事</li>
                            <li>联系我们</li>
                            <li>加入我们</li>
                            <li>版权声明</li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li>课程</li>
                            <li>PHP开发</li>
                            <li>前端开发</li>
                            <li>JAVA开发</li>
                            <li>Android开发</li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li>关注</li>
                            <li>新浪微博</li>
                            <li>腾讯微博</li>
                            <li>企业微信</li>
                            <li>QQ空间</li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li>留言</li>
                            <li>意见反馈</li>
                            <li>问题留言</li>
                            <li>媒体联络</li>
                            <li>在线客服</li>
                        </ul>
                    </li>
                    <li>
                        <div>
                            <img src="images/weixin.png" alt="">
                            <span>微信关注</span>
                        </div>
                        <img src="images/qrcode.jpg" alt="">
                    </li>
                </ul>
            </div>

        </footer>

    </body>
</html>